<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的值发生改变且失去焦点时</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="text" id="" value="" class="form-control" />
		<p class="h1">在输入框写一些东西，然后按下Enter键或者单击输入框外部</p>
	</body>
</html>
<script type="text/javascript">
	$(document).ready(()=>{
		$("input[class='form-control']").change(()=>{
			$("p[class='h1']").html("文本框内容已被修改")
		})
		$("input[class='form-control']").focus(()=>{
			$("p[class='h1']").html("获取焦点")
		})
		$("input[class='form-control']").blur(()=>{
			$("p[class='h1']").append("<p>失去焦点</p>")
		})
	})
</script>
